<template>
    <!-- 气泡动效-->
    <canvas ref="canvas" style="position: absolute;top: 0;left: 0;"></canvas>
</template>
<script>

  import copyObj from './copyObj.js'

  export default {
    name: 'bubblesEffect',
    data () {
      return {
        circles: [],
        requestAniId: null
      }
    },
    props: {
      options: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    computed: {
      opts () {
        return copyObj({}, {
          color: 'rgba(225,225,225,0.5)',
          radius: 15,
          densety: 0.3,
          clearOffset: 0.2
        }, this.options)
      }
    },
    methods: {
      randomColor () {
        let r = Math.floor(Math.random() * 255)
        let g = Math.floor(Math.random() * 255)
        let b = Math.floor(Math.random() * 255)
        let alpha = Math.random().toPrecision(2)
        let rgba = `rgba(${r}, ${g}, ${b}, ${alpha})`
        return rgba
      }
    },
    mounted () {
      var that = this
      //vuepress 是node 编译没有window  编译有很严格， 所以需要代码运行期间（浏览器） 再来加载调用了window的文件  专门抽到js文件里   好麻烦
      import('./animationFrame.js').then(animationFrame => {
        animationFrame.default()
      })
      import('./bubblesEffect.js').then(bubblesEffect => {
        bubblesEffect.default(that)
      })
    },
    beforeDestroy () {
      cancelAnimationFrame(this.requestAniId)
    }
  }
</script>
